<!--  -->
<template>
  <div class="dialog-editor-banner" v-if="dialogShow">
    <SetDesignDialog title="Banner设置" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingBannerDialog">
      <div class="edit-container-u">
      <el-form v-loading="loading" @submit.native.prevent>
          <el-form-item label="是否开启" label-width="120px">
            <el-radio v-model="bjComponent._other.isShow" size="small" :label="0">隐藏</el-radio>
            <el-radio v-model="bjComponent._other.isShow" size="small" :label="1">显示</el-radio>
          </el-form-item>
          <div class="bnn-set">
            <div class="mark-bg" v-if="bjComponent._other.isShow === 0"></div>
            <el-form-item label="显示模式" label-width="120px">
              <el-radio v-model="tmpRenderData.displayMode" size="small" :label="1">图片</el-radio>
              <el-radio v-model="tmpRenderData.displayMode" size="small" :label="2" v-if="!videoDisabled">视频</el-radio>
              <el-tooltip class="item" effect="dark" content="请购买本地视频增值服务！" placement="bottom-start" v-if="videoDisabled">
                <el-radio v-model="tmpRenderData.displayMode" size="small" :label="2" :disabled="videoDisabled">视频</el-radio>
              </el-tooltip>
            </el-form-item>
            <div class="bnn-img" v-if="parseInt(tmpRenderData.displayMode) === 1">
              <el-form-item label="显示方式" label-width="120px">
                <el-select v-model="currenTheme" placeholder="请选择" size="small">
                  <!-- <el-option :label="'请选择'" :value="0">
                  </el-option> -->
                  <el-option v-for="(theme, index) in themes" :key="index" :label="theme.label" :value="theme.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="停留时间" label-width="120px">
                <el-input-number v-model="tmpRenderData.config.pause" :min="1" :max="120" size="small"
                  label="描述文字">
                </el-input-number><span class="number-tit">（单位：秒）</span>
              </el-form-item>
              <el-form-item label="轮动速度" label-width="120px">
                <el-input-number v-model="tmpRenderData.config.speed" :min="200" :step="100" :max="5000"
                  size="small" label="描述文字"></el-input-number><span class="number-tit">（单位：毫秒）</span>
              </el-form-item>
              <el-form-item label="图片" label-width="120px" style="margin-bottom: 2px;">
                <span>
                  <el-button @click.stop="chooseBannerImage" type="text"
                    :disabled="tmpRenderData.imageList && tmpRenderData.imageList.length >= 12">选择图片
                  </el-button>
                  <span v-if="tmpRenderData.imageList &&  tmpRenderData.imageList >= 12"
                    style="color:#888888;">图片数量不能超过12张</span>
                </span>
              </el-form-item>
              <div>
                <span v-if="!tmpRenderData.imageList || tmpRenderData.imageList.length < 1"
                  class="no-data">没有图片数据</span>
                <ul v-else class="banner-list">
                  <draggable v-model="tmpRenderData.imageList" class="imaged-placeholder"
                    v-bind="{draggable:'.img-item-draggable'}" @end="datadragEnd">
                    <li v-for="(item, index) in tmpRenderData.imageList" :key="index" class="img-item-draggable">
                      <div class="img">
                        <img :src="item.src" :alt="item.alt"
                          :title="item.title">
                      </div>
                      <div class="demonstration">
                        <i @click.stop="editorBannerImage(index)" class="el-icon-edit"></i><i
                          @click.stop="deleteBannerImage(index)" class="el-icon-delete"></i>
                      </div>
                    </li>
                  </draggable>
                </ul>
              </div>
            </div>
            <div class="bnn-video" v-if="parseInt(tmpRenderData.displayMode) === 2">
              <el-form-item label="选择文件" style="margin-bottom:8px;" label-width="120px">
                <el-button type="primary" size="small" @click.stop="chooseFile">点击上传文件</el-button>
                <span class="spn">仅支持编码为H264，格式为MP4格式的视频，最大为{{size}}M。</span>
                <div v-if="videoInfo && videoInfo.id">
                  <div class="dffr">
                    <div class="file-image-icon">
                      <img :src="require('@/assets/images/icon_suffix/'+videoInfo.suffix+'.png')" alt="file-icon"
                        style="max-width:40px;max-height:40px;">
                    </div>
                    <div class="file-name black">
                      {{videoInfo.originalFilename}}
                    </div>
                    <div class="opt">
                      <el-button type="text" @click.stop="deleteFile"><i class="el-icon-delete"></i></el-button>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="视频高度" label-width="120px" style="margin-bottom: 0px;">
                <el-input @blur="heightBlur" size="mini" style="width:100px;" v-model="tmpRenderData.videoConfig.height"
                  maxlength="30" placeholder=""></el-input>
                <span class="spn"></span>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </SetDesignDialog>
    <!-- 选择图片 -->
    <ChooseRepertory ref="chooseRepertory" />
    <!-- 对banner图片内容的设置 -->
    <DialogEditorBannerItem ref="dialogEditorBannerItem" :editorBannerItem="editorBannerItem" />
  </div>
</template>

<script>
// import ImagesEmpty from '@/assets/images/image-empty.png'
import draggable from 'vuedraggable'
import * as functions from '@/core/functions.js'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import DialogEditorBannerItem from '@/components/common/design/dialog/banner/DialogEditorBannerItem.vue'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_BANNER, (bjComponent) => {
      this.bjComponent = bjComponent
      this.dialogShow = true
      this.loading = false
      this.tmpRenderData = this.bjComponent.render.data
      this.currenTheme = getTheme(this.tmpRenderData)
      this.device = this.bjComponent._other.device
      this.videoInfo = this.bjComponent._other.video.hrepertory
      functions.hostSetup().then(setup => {
        if (setup && setup.video && setup.video === 1) {
          this.videoDisabled = false
        } else {
          this.videoDisabled = true
          this.tmpRenderData.displayMode = 1
        }
        if (setup && setup.videoupload) {
          this.size = parseFloat(setup.videoupload / (1024 * 1024)).toFixed(1)
        } else {
          this.size = 0
        }
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      loading: true,
      // themes 所有的banner主题
      themes: [
        { value: 1, label: '通用渐变切换' },
        { value: 2, label: '通用上下轮动' },
        { value: 3, label: '通用左右轮动' },
        { value: 4, label: 'Swiper-2D多图背景' },
        { value: 5, label: 'Swiper-旋转木马' },
        { value: 6, label: 'Swiper-底部缩略图' },
        { value: 7, label: '百叶窗切换' },
        { value: 8, label: 'html5Zoo混合（上传大图）' }
      ],
      // 当前选择的主题，默认1
      currenTheme: 1,
      // 阿毅，临时保存
      tmpRenderData: {},
      device: null,
      // 阿毅，用户保存弹窗传递过来的参数
      bjComponent: null,
      videoInfo: {},
      size: 0,
      videoDisabled: true
    }
  },
  watch: {
    currenTheme: {
      handler (newValue) {
        if (newValue === 0) {
          return
        }
        let config = this.tmpRenderData && this.tmpRenderData.config ? _.cloneDeep(this.tmpRenderData.config) : {}
        let swiper = this.tmpRenderData && this.tmpRenderData.swiper ? _.cloneDeep(this.tmpRenderData.swiper) : {}
        if (newValue === 1) {
          config.mode = 'fade'
          this.tmpRenderData.theme = '1'
          this.tmpRenderData.config = config
        } else if (newValue === 2) {
          config.mode = 'vertical'
          this.tmpRenderData.theme = '1'
          this.tmpRenderData.config = config
        } else if (newValue === 3) {
          config.mode = 'horizontal'
          this.tmpRenderData.theme = '1'
          this.tmpRenderData.config = config
        } else if (newValue === 4) {
          swiper.theme = '1'
          this.tmpRenderData.theme = '2'
          this.tmpRenderData.swiper = swiper
        } else if (newValue === 5) {
          swiper.theme = '2'
          this.tmpRenderData.theme = '2'
          this.tmpRenderData.swiper = swiper
        } else if (newValue === 6) {
          swiper.theme = '3'
          this.tmpRenderData.theme = '2'
          this.tmpRenderData.swiper = swiper
        } else if (newValue === 7) {
          this.tmpRenderData.theme = '3'
        } else if (newValue === 8) {
          this.tmpRenderData.theme = '4'
        }
      },
      deep: true
    }
  },
  methods: {
    getDialogShow () {
      return this.dialogShow
    },
    // 父级调用显示方法
    show () {
      if (!this.design.pageId || this.design.pageId < 1) {
        this.$message.error('等待页面加载完毕！')
        return
      }
      this.dialogShow = true
      this.bjComponent = BackendjsFunctions.getBanner()
      this.tmpRenderData = this.bjComponent.render.data
      this.currenTheme = getTheme(this.tmpRenderData)
      this.device = this.bjComponent._other.device
      this.videoInfo = this.bjComponent._other.video.hrepertory
      functions.hostSetup().then(setup => {
        if (setup && setup.video && setup.video === 1) {
          this.videoDisabled = false
        } else {
          this.videoDisabled = true
          this.tmpRenderData.displayMode = 1
        }
        if (setup && setup.videoupload) {
          this.size = parseFloat(setup.videoupload / (1024 * 1024)).toFixed(1)
        } else {
          this.size = 0
        }
      })
      this.loading = false
    },
    // 关闭弹出层
    close () {
      // 当前选择的主题，默认1
      this.currenTheme = 1
      this.dialogShow = false
      this.loading = true
      // 请求获取的数据
      this.tmpRenderData = {}
      this.videoInfo = {}
      this.size = 0
      this.videoDisabled = true
    },
    saveclose () {
      this.bjComponent.render.data = this.tmpRenderData
      BackendjsFunctions.saveBanner(_.cloneDeep(this.bjComponent))
      this.close()
    },
    // 选择资源库图片
    chooseBannerImage () {
      let max = 12
      let chooseNum = max - this.bjComponent._other.imageList.length
      this.$refs['chooseRepertory'].show({ title: '选择Banner图片', max: chooseNum, where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          repertoryList.forEach(item => {
            let imgInfo = {
              alt: '',
              imglink: '',
              src: '',
              title: ''
            }
            imgInfo.src = functions.getRepertoryImageSrcByHostRepertory(item)
            this.tmpRenderData.imageList.push(imgInfo)
            let imghrepertory = {}
            imghrepertory.hrepertory = item
            this.bjComponent._other.imageList.push(imghrepertory)
            this.$nextTick(() => {
              this.$refs['settingBannerDialog'].open()
            })
          })
        }
      })
    },
    // 设置当前banner图片内容
    editorBannerImage (keybin) {
      let item = this.tmpRenderData.imageList.find((element, index) => {
        return index === keybin
      })
      if (!item) {
        this.$message.error('未找到对象！')
      }
      this.$refs['dialogEditorBannerItem'].show(_.cloneDeep(item), keybin, this.tmpRenderData.theme)
    },
    // 删除选择的banner图片
    deleteBannerImage (keybin) {
      let findex = this.tmpRenderData.imageList.findIndex((item, index) => {
        return keybin === index
      })
      if (findex > -1) {
        this.tmpRenderData.imageList.splice(findex, 1)
        this.bjComponent._other.imageList.splice(findex, 1)
      }
    },
    // 拖拉排序
    datadragEnd (event) {
      let item = this.bjComponent._other.imageList[event.oldIndex]
      this.bjComponent._other.imageList.splice(event.oldIndex, 1)
      this.bjComponent._other.imageList.splice(event.newIndex, 0, item)
    },
    // 修改 banner 图片设置的内容
    editorBannerItem (index, item) {
      this.tmpRenderData.imageList.splice(index, 1, item)
    },
    // 选择视频资源文件
    chooseFile () {
      this.$refs['chooseRepertory'].show({ title: '选择文件', where: { type: [5] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let repertory = repertoryList[0]
          this.bjComponent._other.video.hrepertory = _.cloneDeep(repertory)
          this.videoInfo = _.cloneDeep(repertory)
          let src = functions.getRepertoryVideoSrcByHostRepertory(repertory)
          this.tmpRenderData.video.src = src
        }
      })
    },
    // 删除 视频
    deleteFile () {
      this.bjComponent._other.video.hrepertory = null
      this.videoInfo = {}
      this.tmpRenderData.video.src = ''
    },
    heightBlur () {
      if (/^(\d)+$/.test(this.tmpRenderData.videoConfig.height)) {
        this.tmpRenderData.videoConfig.height = this.tmpRenderData.videoConfig.height + 'px'
      } else if (/^(\d)+(%|vw|vh|px)$/.test(this.tmpRenderData.videoConfig.height)) {
        this.tmpRenderData.videoConfig.height = this.tmpRenderData.videoConfig.height
      } else if (/^(calc\()+(\d)+(%|vw|vh)+\s+(-)+\s+(\d)+(px\))$/.test(this.tmpRenderData.videoConfig.height)) {
        this.tmpRenderData.videoConfig.height = this.tmpRenderData.videoConfig.height
      } else {
        this.tmpRenderData.videoConfig.height = ''
      }
    }
  },
  components: {
    ChooseRepertory,
    SetDesignDialog,
    DialogEditorBannerItem,
    draggable
  }
}

function getTheme (responseData) {
  let theme = responseData.theme
  let config = responseData.config
  let swiper = responseData.swiper
  if (parseInt(theme) === 1) {
    switch (config.mode) {
      case 'fade':
        return 1
      case 'vertical':
        return 2
      case 'horizontal':
        return 3
      default:
        break
    }
  } else if (parseInt(theme) === 2) {
    switch (swiper.theme) {
      case '1':
        return 4
      case '2':
        return 5
      case '3':
        return 6
      default:
        break
    }
  } else if (parseInt(theme) === 3) {
    return 7
  } else if (parseInt(theme) === 4) {
    return 8
  }
}

</script>

<style scoped lang="scss">
.edit-container-u {
  width: 810px;
}
.dialog-editor-banner .number-tit {
  color: #888888;
  font-size: 11px;
}
.dialog-editor-banner .no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #888888;
  height: 100px;
}
.dialog-editor-banner .banner-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.dialog-editor-banner .banner-list li {
  margin: 4px 6px;
  position: relative;
  cursor: move;
}
.dialog-editor-banner .banner-list .img {
  line-height: 120px;
  width: 150px;
  border: 1px solid #e5e5e5;
  text-align: center;
}
.dialog-editor-banner .banner-list .img img {
  max-width: 140px;
  max-height: 120px;
  vertical-align: middle;
}
.dialog-editor-banner .banner-list li .demonstration {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  background: #409eff;
  color: #fff;
  text-align: right;
  font-size: 16px;
  padding: 5px;
  opacity: 0;
}
.dialog-editor-banner .banner-list li:hover .demonstration {
  opacity: 1;
}
.dialog-editor-banner .banner-list li .demonstration i {
  padding: 0 6px;
  cursor: pointer;
}
.dialog-editor-banner .banner-list li .demonstration i:hover {
  color: #fef47e;
}
.dialog-editor-banner .bnn-set {
  position: relative;
}
.dialog-editor-banner .mark-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: not-allowed;
  opacity: 0.8;
  background: #ffffff;
  z-index: 99;
}
.dialog-editor-banner .el-form-item{
  margin-bottom: 8px;
}
.spn {
  margin-left: 15px;
  color: #666;
  font-size: 12px;
}
.dffr {
  margin-top: 5px;
  line-height: 1.3;
  .opt {
    margin-left: 28px;
    .el-icon-delete {
      font-size: 18px;
      &:hover {
        color: #0480fb;
      }
    }
  }
}
.file-name {
  margin-left: 10px;
  margin-top: 8px;
  line-height: 2;
}
.bnn-video{
  min-height: 289px;
}
</style>
